import { Component, OnInit } from '@angular/core';
// 引入angular内置模块的类
// 1. FromGroup, FormControl, FormBuilder 内置的form表单类，用于对应数据结构;
// 2. Validators: 内置的form 验证;
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

import { UserValidator } from '../app.interface';


@Component({
  selector: 'app-validator-directive',
  templateUrl: './validator-directive.component.html',
  styleUrls: ['./validator-directive.component.scss']
})
export class ValidatorDirectiveComponent implements OnInit {

  user: FormGroup;

  constructor(private fb: FormBuilder) { }

  onSubmit(): void {
    console.log(this.user);
    console.log(this.user.value);
    console.log(this.user.valid);
  }

  ngOnInit() {
    this.user = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(8)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required],
    });
  }
}
